<template>
    <div class="content-right">
        <Card shadow>
            <Button type="primary" icon="plus" @click="userAdd">添加用户</Button>
            
            <Form ref="formCustom" :model="formCustom" :label-width="20" style="margin-top: 20px;" @keyup.enter.native="huiche">
            	<Row>
			        <Col :xs="12" :sm="12" :md="5" :lg="5">
			        	<Input type="text" v-model="formCustom.message" placeholder="请输入用户ID/姓名/身份证号/电话号码"></Input>
				    </Col>
			        <Col :xs="12" :sm="12" :md="4" :lg="4">
			        	<FormItem>
				        	<Select v-model="formCustom.sex" placeholder="性别" clearable>
				        		<Option value="1">男</Option>
						        <Option value="0">女</Option>
						    </Select>
					    </FormItem>
			        </Col>
			        <Col :xs="12" :sm="12" :md="4" :lg="4">
			        	<FormItem>
				        	<Select v-model="formCustom.age" placeholder="用户年龄" clearable>
						        <Option v-for="V in ageList" :key="V.value" :value="V.value":label="V.text"></Option>
						    </Select>
					    </FormItem>
			        </Col>
			        <Col :xs="12" :sm="12" :md="4" :lg="4">
			        	<FormItem>
				        	<Select v-model="formCustom.state" placeholder="启用状态" clearable>
						        <Option value="1">启用</Option>
						        <Option value="0">禁用</Option>
						    </Select>
					    </FormItem>
			        </Col>
			        <Col :xs="12" :sm="12" :md="6" :lg="6">
			        	<Button type="primary" @click="search" style="margin-left: 20px;">搜索</Button>
			        </Col>
		    	</Row>
		    </Form>
		    
		    <!--表格-->
		    <div class="table">
		        <Table border ref="selection" :columns="columns" :data="staff" @on-selection-change="selectMore"></Table>
		        
		        <div class="selectall">
			        <Checkbox type="checkbox" @on-change="handleSelectAll()" v-model="checkAll">全选</Checkbox>
			        <Button @click="useState(false)">禁用</Button>
			        <Button @click="useState(true)">启用</Button>
			        <Button @click="dels">删除</Button>
			        <Button @click="deriveDate">导出数据</Button>
			        <Page :total="allTotal" show-elevator show-total :page-size='10' :current='page' @on-change="changePage"></Page>
		        </div>
		    </div>
        </Card>
    </div>
</template>
<script>
import Cookies from 'js-cookie';
import $store from '@/store/index.js'
import Vue from 'vue';
var $vue=new Vue();
export default {
    data() {
        return {
        	
        	staff:[],
        	allTotal:0,
        	Something:[],
        	page:1,
        	delid:[],
        	modalk:false,
        	checkAll:false,
        	seeklist:{
        		Sex1:'',
        		status1:'',
        		message1:'',
        		ageGt1:'',
        		ageLt1:''
        	},
        	ageGt:'',
        	ageLt:'',
        	ageList: [
                {value:'0,19',text:'19岁及以下'},
                {value:'20,29',text:'20~29岁'},
                {value:'30,39',text:'30~39岁'},
                {value:'40,49',text:'40~49岁'},
             	{value:'50,99',text:'50岁及以上'}
            ],
            formCustom:{
            	message:"",
            	sex:"",
            	age:"",
            	state:""
            },
        	columns: [
        		{
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
        		{
        			title: 'ID',
                    key: 'Id',
                    align: 'center'
        		},
                {	
                    title: '姓名',
                    key: 'name',
                    align: 'center'
                },
                {
                	title: '身份证号',
                    key: 'idcard',
                    align: 'center',
                    render:(h,params) =>{
                    	return h('div',params.row.idcard = params.row.idcard.substr(0, 3) + '****' + params.row.idcard.substr(params.row.idcard.length - 4))
                    }
                },
                {
                	title: '绑定手机',
                    key: 'phone',
                    align: 'center',
                    render:(h,params) =>{
                    	return h('div',params.row.phone = params.row.phone.substr(0, 3) + '****' + params.row.phone.substr(params.row.phone.length - 4))
                    }
                },
                {
                	title: '性别',
                    key: 'sex',
                    align: 'center',
                    render: (h, params) => {
                        return h('div',params.row.sex?'男':'女');
                    }
                },
                {
                    title: '用户年龄',
                    key: 'age',
                    align: 'center'
                },
                {
                    title: '账号启用状态',
                    key: 'status',
                    align: 'center',
                    render: (h, params) => {
                        return h('i-switch',{
                        	props:{
                        		size:"large",
                        		value:params.row.status=="1"?true:false
                        	},
                        	on:{
                        		'on-change':function(e){
                        			$vue.axios({
                        				method:'get',
                        				url:$store.state.app.globalUrl+"/admin/Examinee/changeStatus?id="+params.row.Id+"&status="+(e?1:0),
                        				data:{
                        					
                        				}
                        			}).then(function(res){
                        				if(res.data.msg=="操作成功"){
                        					$vue.$Message.success(e?'已启用':'已禁用');
                        				}else{
                        					$vue.$Message.error('操作失败');
                        				}
                        			});
                        		}
                        	}
                        	
                        },[
                        	h('span',{
                        		slot:"open",
                        	},'开启'),
                        	h('span',{
                        		slot:"close",
                        	},'关闭'),
                        ]);
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 180,
                    align: 'center',
                    render: (h, params) => {
                        return h('div',[
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                    icon:'compose'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.$router.push({
    										name: 'user-alter',
    										query:{
    											id:params.row.Id
    										}
    									})
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small',
                                    icon:'ios-trash-outline'
                                },
                                on: {
                                    click: () => {
                                    	var that=this;
							        	var selectS=this.Something
							            this.$Modal.confirm({
							                content: '<h4>确定删除？</h4>',
							                onOk: () => {
							                    this.axios({
							                        method:'get',
							                        url:that.$store.state.app.globalUrl+"/admin/Examinee/del?id="+params.row.Id,
							                        data:{}
							                    }).then(function(res){
							                        that.$Message.success('已删除');
							                        that.load();
							                    });
							                },
							                onCancel: () => {
							                    
							                }
							            })
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ]
        }
    },
    watch:{
    	'formCustom.age'(n,o){
    		var agearr
    		if(n==undefined){
    			this.ageGt='';
    			this.ageLt='';
    		}else{
    			agearr=this.formCustom.age.split(',');
	    		this.ageGt=parseInt(agearr[0]);
	    		this.ageLt=parseInt(agearr[1]);
    		}
    	}
    },
    created:function(){
		this.load()
    },
    methods: {
		//加载数据
    	load(){
    		var that=this;
    		var pageNow=that.page;
    		var sex=that.seeklist.sex1;
    		var status=that.seeklist.state1;
    		var message=that.seeklist.message1;
    		var ageLt=that.seeklist.ageLt1;
    		var ageGt=that.seeklist.ageGt1;
			this.axios({
	            method: 'get',
	            url: that.$store.state.app.globalUrl+'/admin/Examinee/index?size=10&page='+pageNow+(sex==''||sex==undefined?'':'&sex='+sex)+(status==''||status==undefined?'':'&status='+status)+(message==''||message==undefined?'':'&keywords='+message)+(ageGt==''||ageGt==undefined||isNaN(ageGt)?'':'&ageGt='+ageGt)+(ageLt==''||ageLt==undefined||isNaN(ageLt)?'':'&ageLt='+ageLt),
	            data: {}
	        }).then(function(res){
	        	that.staff=res.data.data.list;
	        	that.allTotal=res.data.data.count;
	        	that.checkAll=false;
	        	
	    	})
    	},
		//每次改变页面读取数据
		changePage(num){
        	this.page=num;
        	this.load();
        	this.Something=[];
        },
        //获取选择到的ID
        selectMore(num){
			this.Something=[];
			if(num.length==this.staff.length){
				this.checkAll=true;
			}else{
				this.checkAll=false;
			}
        	num.forEach((item,index)=>{
        		this.Something.push(item.Id);
        	})
        },
		//跳转添加用户页面
    	userAdd(){
    		this.$router.push({
    			name: 'user-add'
    		})
    	},
		//表格全选
		handleSelectAll() {
			this.$refs.selection.selectAll(this.checkAll);
        },
//		批量改变状态
		useState(it) {
			var that=this;
			if(this.Something==0){
				this.$Message.error('未选择用户');
			}else{
				this.axios({
					method:'get',
					url:that.$store.state.app.globalUrl+"/admin/Examinee/changeStatus?id="+that.Something.join(',')+'&status='+(it?1:0),
					data:{}
				}).then(function(res){
					if(that.checkAll==true){
						that.checkAll=false;
					}
					if(res.data.msg=="操作成功"){
						that.$Message.success(it?'已启用':'已禁用');
						that.load();
						that.Something=[];
					}else{
						that.$Message.error('操作失败');
					}
				})
			}
		},
//	        批量删除
	    dels(){
	    	var that=this;
        	var selectS=this.Something;
        	if(this.Something==0){
	    		this.$Message.error('未选择用户');
	    	}else{
	    		this.$Modal.confirm({
	                content: '<h4>确定删除？</h4>',
	                onOk: () => {
	                    this.axios({
	                        method:'get',
	                        url:that.$store.state.app.globalUrl+"/admin/Examinee/del?id="+selectS.join(','),
	                        data:{}
	                    }).then(function(res){
	                        that.$Message.success('已删除');
	                        that.Something=[];
	                        that.load();
	                    });
	                },
	                onCancel: () => {
	                    
	                }
	            })
	    	} 
	    },
//		导出数据
		deriveDate(){
			let arr=[];
			let itarr;
			this.staff.forEach((v,i)=>{
        		this.Something.forEach((v1,i1)=>{
        			if (v.Id==v1) {
        				itarr={Id:v.Id,name:v.name,idcard:v.idcard,phone:v.phone,sex:v.sex==1?'男':'女',age:v.age}
        				arr.push(itarr);
        			}
        		})
        	})
			if(arr.length==0){
				this.$Message.error('请选择导出的数据');
			}else{
				let title=[];
				this.columns.forEach((v,i)=>{
					if(v.title==undefined||i>6){
						v.title='';
					}else{
						title.push(v.title)
					}
				});
				this.$refs.selection.exportCsv({
		            filename: '用户信息',
		            columns: this.columns,
		            data: arr
	        	});
	        	this.Something=[];
	        	this.load();
			}
	    },
//		搜索
	    search () {
	    	this.seeklist.sex1=this.formCustom.sex;
	    	this.seeklist.state1=this.formCustom.state;
	    	this.seeklist.message1=this.formCustom.message;
	    	this.seeklist.ageGt1=this.ageGt;
	    	this.seeklist.ageLt1=this.ageLt;
	    	this.page=1;
            this.load();
            this.Something=[];
        },
//      回车事件
        huiche(){
        	this.search();
        }
    }
};
</script>
<style >
	.table{margin-top: 20px;}
	.table .selectall{margin-top: 10px;overflow: hidden;padding-bottom: 4px;}
	.table .selectall .ivu-page{float: right;}
	.ivu-modal-content .ivu-modal-body{font-size: 20px;text-align: center;}
</style>